<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- Head 开始 -->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 告诉浏览器对屏幕宽度做出响应 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户</title>
  <!-- 主要样式表开始 -->
  <link href="/assets/css/main.css" rel="stylesheet">
  <link href="/css/viewOrder.css" rel="stylesheet">
  <!-- favicon图标 -->
  <link type="image/png" rel="shortcut icon" href="/assets/images/favicon.png">
</head>
<!-- Head 结束 -->

<body>
<!-- 预加载部分开始 -->
<div id="preloader">
  <div id="status"></div>
</div>
<!-- 预加载部分结束 -->
<div class="boxed-layout">
  <!-- 页眉部分开始 -->
  <header class="top-header theme-bg">
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="jama-logo">
            <a href="#" class=""><img src="/assets/images/logo-topbar.gif" class="img-responsive"
                                      alt=""></a>
          </div>
        </div>
        <div class="col-lg-7 align-self-center">
          <div class="jama-info d-inline-flex">
            <ul>
              <li class="border-right"><i class="fa fa-phone me-1"></i> 15348361234</li>
              <li><i class="fa fa-envelope me-1"></i>1192878959@qq.com</li>
            </ul>
          </div>
          <div class="jama-social d-inline-flex">
            <ul>
              <li><a href="#" class="border-round"><i class="fa-brands fa-facebook"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-x-twitter"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-instagram"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-linkedin-in"></i></a></li>
            </ul>
            <ul style="color: #fff;">
              <li th:if="${session.username!=null}">
                已登陆
                <a href="/logout">退出</a>
              </li>
              <li th:if="${session.username==null}">
                <a href="/">登录</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- /#header 部分结束 -->

  <!-- 导航部分 -->
  <div class="navigation">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <nav class="navbar navbar-expand-md navbar-dark">
            <div class="navbar-header">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
              </button>
            </div>
            <div class="justify-content-center collapse navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="/main/view">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="/cart/view">商品</a></li>
                <li class="nav-item"><a class="nav-link" href="/order/view">订单</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <!-- /#导航部分结束 -->

  <!--主体开始-->
  <div>
    <div>
      <a href="/main/view"
         style="
                   background-color: green;
                border: 1px solid grey;
                color: white;
                border-radius: 4px;
                padding: 8px 16px;
                text-decoration: none;
                display: inline-block;
                font-size: 14px;
                margin: 4px 2px;
                cursor: pointer;
                transition: background-color 0.3s;">返回</a>
      <h2><b>用户</b></h2>
      <table class="shopping-cart-table">
        <tr>
          <th>userid</th>
          <th>email</th>
          <th>firstname</th>
          <th>lastname</th>
          <th>status</th>
          <th>addr1</th>
          <th>addr2</th>
          <th>city</th>
          <th>state</th>
          <th>zip</th>
          <th>country</th>
          <th>phone</th>
          <th>favcategory</th>
          <th>&nbsp;</th>
        </tr>

        <tr th:if="${query == null || query.isEmpty()}">
          <td colspan="5" class="empty-cart">Your user is empty.</td>
        </tr>

        <tr th:each="q : ${query}">
          <td th:text="${q.userid}"></td>
          <td th:text="${q.email}"></td>
          <td th:text="${q.firstname}"></td>
          <td th:text="${q.lastname}"></td>
          <td th:text="${q.status}"></td>
          <td th:text="${q.addr1}"></td>
          <td th:text="${q.addr2}"></td>
          <td th:text="${q.city}"></td>
          <td th:text="${q.state}"></td>
          <td th:text="${q.zip}"></td>
          <td th:text="${q.country}"></td>
          <td th:text="${q.phone}"></td>
          <td th:text="${q.favcategory}"></td>
          <td>
            <a th:href="@{'/account/delete?userid=' + ${q.userid}}"
               class="details-link">删除</a>
            <a th:href="@{'/account/get?userid=' + ${q.userid}}"
               class="details-link">修改</a>
          </td>
        </tr>
      </table>
      <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background-color: #f4f4f4; border-radius: 5px;">
        <a href="/account/toadd" style="padding: 8px 12px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 3px;">增加</a>
        <form action="/account/view" method="post" style="display: flex; align-items: center; gap: 10px;">
          <input type="text" name="userid" placeholder="Userid" style="padding: 6px; border: 1px solid #ccc; border-radius: 3px;">
          <input type="text" name="email" placeholder="Email" style="padding: 6px; border: 1px solid #ccc; border-radius: 3px;">
          <input type="text" name="firstname" placeholder="Firstname" style="padding: 6px; border: 1px solid #ccc; border-radius: 3px;">
          <input type="text" name="lastname" placeholder="Lastname" style="padding: 6px; border: 1px solid #ccc; border-radius: 3px;">
          <input type="text" name="favcategory" placeholder="Favcategory" style="padding: 6px; border: 1px solid #ccc; border-radius: 3px;">
          <input type="submit" value="查询" style="padding: 8px 12px; background-color: #007BFF; color: white; border: none; border-radius: 3px; cursor: pointer;">
        </form>
      </div>
    </div>
    <div id="Separator">&nbsp;</div>
  </div>
  <!--主体结束-->
</div>

<!-- jQuery (Bootstrap的JavaScript插件必需) -->
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<!-- swiper文件 -->
<script src="/assets/js/swiper.min.js"></script>
<!-- 作品展示js文件 -->
<script src="/assets/js/jquery.mixitup.min.js"></script>
<!-- 站点主js文件 -->
<script src="/assets/js/main.js"></script>

</body>

</html>
